/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="money-content">
    <Title title="征收资金情况(万元)"></Title>
    <div class="main">
      <div class="chart">
        <v-chart ref="chart" auto-resize :options="options" theme="macarons"/>
      </div>
      <div class="chart">
        <v-chart ref="chart" auto-resize :options="options2" theme="macarons"/>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
import ECharts from "vue-echarts";
import config from "../../utils/config.js";

const getChartOptions = data => {
  if (!data) return {};
  let chartOptions = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}万元 ({d}%)",
      position: function(pos, params, dom, rect, size) {
        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        var obj = { top: 60 };
        obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
      }
    },
    legend: {
      //图例组件
      orient: "vertical", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      left: "60%",
      top: "middle",
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      data: ["已拨付", "缺口"],
      icon: "circle",
      textStyle: {
        color: "#fff", //文字颜色
        fontSize: window.chartFontSize * 0.85 //文字大小
      },
      formatter: function(name) {
        if (name === "已拨付") {
          return name + "\n" + Math.round(data.geted / 10000);
        } else {
          return name + "\n" + Math.round(data.gap / 10000);
        }
      }
    },
    series: [
      {
        name: "征收资金情况",
        type: "pie",
        radius: ["48%", "60%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          show: false
        },
        data: [
          { value: Math.round(data.geted / 10000), name: "已拨付" },
          { value: Math.round(data.gap / 10000), name: "缺口" },
          {
            value: 0,
            name: "总量",
            label: {
              show: true,
              position: "center",
              formatter: function() {
                return "资金总额\n" + Math.round(data.total / 10000);
              },
              fontWeight: "bold",
              fontSize: window.chartFontSize
            }
          }
        ]
      }
    ]
  };
  return chartOptions;
};

const getChartOptions2 = data => {
  if (!data) return {};
  let chartOptions = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
      position: function(pos, params, dom, rect, size) {
        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        var obj = { top: 60 };
        obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
      }
    },
    legend: {
      //图例组件
      orient: "vertical", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      left: "60%",
      top: "middle",
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      icon: "circle",
      data: ["已支付", "余额", "未付"],
      textStyle: {
        //图例文字的样式
        color: "#fff", //文字颜色
        fontSize: window.chartFontSize * 0.8 //文字大小
      },
      formatter: function(name) {
        if (name === "已支付") {
          return name + "\n" + Math.round(data.payed / 10000);
        } else if (name === "余额") {
          return name + "\n" + Math.round(data.balance / 10000);
        } else {
          return name + "\n" + Math.round(data.unpayed / 10000);
        }
      }
    },
    series: [
      {
        name: "征收资金情况",
        type: "pie",
        radius: ["48%", "60%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          show: false
        },
        data: [
          { value: Math.round(data.payed / 10000), name: "已支付" },
          { value: Math.round(data.balance / 10000), name: "余额" },
          { value: Math.round(data.unpayed / 10000), name: "未付" },
          {
            value: 0,
            name: "总量",
            label: {
              show: true,
              position: "center",
              formatter: function() {
                return "资金支付\n情况";
              },
              fontWeight: "bold",
              fontSize: window.chartFontSize
            }
          }
        ]
      }
    ]
  };
  return chartOptions;
};

export default {
  props: {
    money: Object
  },
  data() {
    return {
      options: getChartOptions(this.money),
      options2: getChartOptions2(this.money)
    };
  },
  watch: {
    money: function(data) {
      this.options = getChartOptions(data);
      this.options2 = getChartOptions2(this.money);
    }
  },
  methods: {},
  mounted() {
    const self = this;

    let chartObj = self.$refs.chart;
    self.currentIndex = -1;

    // setInterval(function() {
    //   var dataLen = 3;
    //   // 取消之前高亮的图形
    //   chartObj.dispatchAction({
    //     type: "downplay",
    //     seriesIndex: 0,
    //     dataIndex: self.currentIndex
    //   });
    //   self.currentIndex = (self.currentIndex + 1) % dataLen;
    //   // 高亮当前图形
    //   chartObj.dispatchAction({
    //     type: "highlight",
    //     seriesIndex: 0,
    //     dataIndex: self.currentIndex
    //   });
    //   // 显示 tooltip
    //   chartObj.dispatchAction({
    //     type: "showTip",
    //     seriesIndex: 0,
    //     dataIndex: self.currentIndex
    //   });
    // }, config.animateInterval || 1000);
  },
  components: { Title, "v-chart": ECharts }
};
</script>

<style lang='less' scoped>
.money-content {
  width: 100%;
  height: 100%;
  position: relative;
  // overflow: hidden;
  .main {
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .chart {
      flex: 1;
      display: flex;
      justify-content: center;
      align-content: center;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
